<template>
	<view class="myPoints">
		<view class="myPoints_banner">
			<image class="banner_bcg" src="https://wx.2024csnl.com/static/mine/jf_ye_bcg.png" mode=""></image>
			<view class="myPoints_total">
				<view class="total_t">
					<view class="title">权证余额</view>
					<view  v-if="false" class="rule" @click="open('popup')">
						<view class="rule_icon">?</view>
						<view class="rule_name">泌豆规则</view>
					</view>
				</view>
				<view class="total_points">{{money}}</view>
				<view class="point_explain" v-if="false">泌豆可用于购买商品和兑换贡献值</view>
				<view class="exchange_btn" v-if="false">
					<view class="" @click="onSkip('/pages/goods/integral-mall')">泌豆兑换</view>
					<view style="margin-left: 100rpx;" v-if="showType==1" @click="onSkip('/package/mine/transition/transition?tabsActive=1&person=true')">转赠</view>
				</view>
			</view>
		</view>
		<view class="list_title">权证明细</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_l">
					<view class="item_name">{{item.remark}}</view>
					<view class="item_time">{{item.time}}</view>
				</view>
				<view class="item_r">
					{{item.score}}
				</view>
			</view>
			<view class="flex-center addressImgBox" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
			<view style="height: 50px;"></view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="hintModalBox">
				<view class="title">泌豆规则</view>
				<view class="hint">
					<text>{{rule}}</text>
				</view>
				<view class="btn flex-center" @click="close('popup')">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import ADMixin from '../../../utils/ad.js';
	// #endif
	import {
		getShoppingDetails,
		getIntegrationRule
	} from "../../../api/index.js"
	export default {
		// #ifdef APP-PLUS
		mixins: [ADMixin],
		// #endif
		data() {
			return {
				showType:null,
				money: 0,
				list: [],
				rule: '',
				pagenum: 1,
				totalPage: '',
				noMoreData: false,
			};
		},
		onLoad(opt) {
			this.showType=opt.type
			this.onGetShoppingDetails()
			this.onGetIntegrationRule()
		},
		onReachBottom() {
			if (this.pagenum < this.totalPage) {
				this.pagenum += 1
				this.onGetShoppingDetails('bottom')
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			async onGetShoppingDetails(type) {
				const res = await getShoppingDetails('s=/ApiMy/quanzhenglog', {
					page: this.pagenum
				})
				const {
					msg,
					data,
					status,
					money,
				} = res.data
				console.log(res,"res")
				if (status == 1) {
					this.money = money
					this.totalPage = data.last_page
					type == 'bottom' ? this.list.push(...data.data) : this.list = data.data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},
			async onGetIntegrationRule() {
				const res = await getIntegrationRule('s=/ApiScoreshop/scoresm')
				const {
					msg,
					data,
					status
				} = res.data
				// console.log(res, "res---")
				if (status == 1) {
					this.rule = data

				} else {
					this.showToast(msg)
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.hintModalBox {
		padding: 30rpx;
		border-radius: 30rpx;
		width: 600rpx;
		background: #fff;
		height: 500rpx;
		overflow: auto;
		line-height: 50rpx;
		color: #333333;
		font-size: 32rpx;

		.title {
			color: #F40E2A;
		}

		.hint {
			margin: 20rpx 0 100rpx 0;
			font-size: 20rpx;
		}

		.btn {
			padding: 20rpx 150rpx;
			height: 60rpx;
			background: #F40E2A;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.myPoints {
		padding: 30upx;
		box-sizing: border-box;

		.myPoints_banner {
			width: 100%;
			height: 320upx;
			position: relative;

			.banner_bcg {
				width: 100%;
				height: 320upx;
			}

			.myPoints_total {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 320upx;
				color: #fff;
				padding: 32upx;
				box-sizing: border-box;

				.total_t {
					display: flex;
					justify-content: space-between;
					padding-bottom: 10upx;

					.title {
						font-size: 30upx;
						line-height: 30upx;
					}

					.rule {
						display: flex;
						align-items: center;
						opacity: 0.6;

						.rule_icon {
							width: 28upx;
							height: 28upx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28upx;
							border-radius: 50%;
							border: 1upx solid #fff;
							margin-right: 10upx;
						}

						.rule_name {
							font-size: 24upx;
						}
					}
				}

				.total_points {
					font-size: 56upx;
					line-height: 56upx;
					text-align: center;
					font-weight: 400;
				}

				.point_explain {
					font-size: 28upx;
					line-height: 28upx;
					text-align: center;
					font-weight: 400;
					opacity: 0.8;
					padding: 24upx 0 30upx;
				}

				.exchange_btn {
					display: flex;
					justify-content: center;

					>view {
						
						width: 350upx;
						height: 72upx;
						background-color: #fff;
						border-radius: 36upx;
						line-height: 72upx;
						text-align: center;
						color: #41644A;
						font-size: 400;
					}
				}
			}
		}

		.list_title {
			font-size: 30upx;
			font-weight: 400;
			padding: 32upx 0 28upx;
		}

		.list {
			.item {
				padding: 28upx 52upx 28upx 30upx;
				box-sizing: border-box;
				border-radius: 10upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				margin-bottom: 20upx;

				.item_l {
					.item_name {
						font-size: 28upx;
						line-height: 28upx;
						font-weight: 400;
						margin-bottom: 10upx;
					}

					.item_time {
						font-size: 26upx;
						line-height: 26upx;
						color: #666666;
					}
				}
			}
		}
	}
</style>
